body{
  margin: 0;
  padding: 0;
height: 100vh;
width: 100vw;
}
li,ul{
list-style: none;
}
input{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
div, span, p,table{
  caret-color: transparent;
}
div{
	cursor: default;
}
span{
  cursor: pointer;
}

.navgation{
position:absolute;
top: 2vh;
right: 0;
width: 200px;
height: 500px;
z-index: 6;
overflow: hidden;
}
.navbar{
width: 200px;
height: 500px;
background-color: #c0c0fa;
transform: translateX(200px);
transition: 0.5s;
}

.menubox{
position: relative;
right:-140px;
width:50px;
height:50px;
border-radius: 50%;
}
.userimg{
height: 70px;
}
.userimg img{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -30px;
right: -70px;
}
.menubox:hover{
cursor: pointer;
}
.userimg span{
position: relative;
left: -11%;
}
.setting ul,li{
font-size: 20px;
margin-top: 40px;
display: block;
padding: 0;
}
.setting span{
color: #0f0d0d;
margin: 40px;
}
.setting span:hover{
color: rgb(95, 138, 174);
border-bottom: 1px solid rgb(95, 138, 174);
}

.header{
width: 100vw;
}
.headerone{
height: 12vh;
}
.headertwo{
height: 10vh;
}
.logo{
position: absolute;
top: 3vh;
width: 50px;
height: 50px;
}
.title{
position: absolute;
text-align: center;
height: 2.6rem;
width: 12rem;
font-size: 2.6rem;
text-align: center;
top: 10px;
  bottom: 0;
  left: 3rem;
  right: 0;
}
.search {
margin-left: 100px;
position: absolute;
left: 24vw;
top:3vh;
caret-color: rgb(41, 92, 201)
}
.search input {
width: 40vw;
height: 7vh;
border: 1px solid #22777C;
text-indent: 1em;
caret-color: rgb(41, 92, 201)
}
.searchlogo {
width: 50px;
height: 40px;
  position: absolute;
right: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.nav{
position: relative;
width: 100vw;
height: 8vh;
background-color:#CCCCFF;
list-style: none;
z-index: 2;
}

.navlist li{
position: relative;
float: left;
top: -40px;
left: 50px;
height: 8vh;
text-align: center;
line-height: 8vh;
width: 15vw;
font-size: 1.4rem;
}

.navlist a{
color: #000;
display: block;
}

.navlist{
width: 70vw;
margin: auto;
}

.navlist a:hover{
background-color:rgb(105, 144, 144,0.4);
}
.main{
  width: 100vw;
  height: 540px;
  position: relative;
  top: -10px;
}
.random{
  position: absolute;
  top: 5px;
}
.random span{
  border: 1px solid rgb(180, 139, 219);
  padding: 5px;
  position: relative;
  right: -10px;
}
.random span:hover{
  color: crimson;
}
.main1{
  float: left;
  width: 50vw;
  height: 80px;
  overflow: hidden;
  z-index: 2;
}
.main1 .a1{
  float: left;
  font-size: 20px;
  font-weight: bolder;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(85, 83, 83,0.3);
  padding: 0 10px 0 10px;
  margin: 20px;
  margin-right: 0;
}
.main1 .a2 span{
  float: left;
  border-top: 1px solid rgb(85, 83, 83,0.3);
  border-left: 1px solid rgb(85, 83, 83,0.3);
  border-bottom: 1px solid rgb(85, 83, 83,0.3);
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 10px;
  margin-top: 20px;
}
.main1 .a2 span:hover{
  color: crimson;
}
.main1:first-child{
  width: 100vw;
}
.main2:nth-last-child(1),.main2:nth-last-child(2),.main2:nth-last-child(3){
  width: 100vw;
}
#spread{
  float: right;
  position: relative;
  right: 100px;
  top: 26px;
  font-size: 20px;
  z-index: 7;
}
@media (min-width: 1000px){
  #spread{
    float: right;
    position: relative;
    right: 120px;
    top: 30px;
    font-size: 24px;
    z-index: 7;
  }
}
#spread span:hover{
  color: crimson;
}
.main2{
  display: none;
}
.footer{
	position:absolute;
	top:600px;/*将此div下移*/
	width: 100%;
}
#gotop{
	position:fixed;
	width: 40px;
	height: 40px;
	right:30px;
	bottom: 20px;
	display: none;
}
#gotop img{
	width: 40px;
	height: 40px;
}
.footer p{
	text-align: center;
	font-size: 12px;
	color: rgb(113, 112, 112);
	line-height: 14px;
}